import { Form, Icon, Input, Select, Tooltip } from 'antd';
import React from 'react';
import classNames from 'classnames';
import styles from './styles.less';
import Condition from './Condition';

function Judgement({ value, onChange, counter, onRemove }) {
  const { judgementObjectType, judgementCondition, targetBranch } = value;

  const onJudgementObjectTypeChange = judgementObjectType => {
    onChange({ ...value, judgementObjectType });
  };

  const onConditionChange = condition => {
    onChange({ ...value, judgementCondition: condition });
  };

  const onTargetBranchChange = e => {
    onChange({ ...value, targetBranch: e.target.value });
  };

  return (
    <div className={styles.block}>
      <div className={styles.counter}>
        <span className={styles.num}>{counter}</span>
        <span className={classNames(styles.delete, 'text-danger')} onClick={onRemove}>
          <Tooltip title="删除">
            <Icon type="close" />
          </Tooltip>
        </span>
      </div>
      <Form
        labelCol={{
          sm: { span: 4 },
        }}
        wrapperCol={{
          sm: { span: 18 },
        }}
      >
        <Form.Item label="判断对象">
          <Select value={judgementObjectType} onChange={onJudgementObjectTypeChange}>
            <Select.Option value="PREVIOUS_TASK_OUTPUT">上一环节输出</Select.Option>
            <Select.Option value="PROCESS_VARIABLES">流程变量</Select.Option>
            <Select.Option value="CUSTOM">自定义</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="判断条件">
          <Condition value={judgementCondition} onChange={onConditionChange} />
        </Form.Item>
        <Form.Item label="目标分支" required>
          <Input
            value={targetBranch}
            onChange={onTargetBranchChange}
            placeholder="请输入分支名，如：VALIDATE_SUCCESS"
          />
        </Form.Item>
      </Form>
    </div>
  );
}

export default Judgement;
